import styled from "styled-components"

export const SwiperWrapper = styled.div`
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  .img {
    img {
      &:hover {
        transform: none;
      }
    }
  }
  &:hover {
    .swiper-buttons  {
      visibility: visible;
    }
  }
  .swiper-buttons {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 28px;
    visibility: hidden;
    .swiper-button {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 15px;
    }
    .prev {
      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent);
    }
    .next {
      background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4));
    }
  }
  .indicator {

  }
`